<template>
  <div class='kui-content-wrap'>
    <div class='kui-wrap-desk'>
      <Breadcrumb class='kui-desk-nav'>
        <BreadcrumbItem to="/">我的工作台</BreadcrumbItem>
        <BreadcrumbItem>我的资料</BreadcrumbItem>
      </Breadcrumb>
    </div>
    <div class='kui-wrap-body'>
      <div class="kui-body-section">
        <div class="kui-section-item">
          <div class="kui-item-hd kui-flex kui-flex-between kui-flex-middle">
            <div class="kui-hd-title">我的资料</div>
            <div class="kui-hd-desk">
              <Tag v-if="personalData.state === -1" type="dot" size="small" color="red">账号锁定</Tag>
              <Tag v-else-if="personalData.state === 1" type="dot" size="small" color="green">账号正常</Tag>
              <Tag v-else type="dot" size="small" color="yellow">账号异常</Tag>
            </div>
          </div>
          <div class="kui-item-bd">
            <Form class="kui-form-panel" ref="formData" :model="personalData" :label-width="80" label-position="left">
              <FormItem label="登录账号">
                <Input v-model="personalData.account" disabled/>
              </FormItem>
              <FormItem label="真实姓名">
                <Input v-model="personalData.name"/>
              </FormItem>
              <FormItem v-if=" this.$store.state.userInfo.rid === 1 " label="用户职位">
                <Input v-model="personalData.job"/>
              </FormItem>
              <FormItem v-else label="用户职位">
                <Input v-model="personalData.job" disabled/>
              </FormItem>
              <FormItem label="联系电话">
                <Input v-model="personalData.phone"/>
              </FormItem>
              <FormItem>
                <Button type="primary" @click="modifyPerson">保存资料</Button>
                <Button type="primary" @click="modifyPassWord" style="margin-left: 10px;">修改密码</Button>
              </FormItem>
            </Form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCookie, parseCookie } from '~/utils/cookie'
export default {
  // 计算数据
  computed: {
    personalData() {
      return { ...this.$store.state.userInfo }
    }
  },
  methods: {
    // 修改资料操作
    modifyPerson() {
      const app = this
      app.submitData(app.personalData, '/user/v1/account')
    },
    // 修改密码
    modifyPassWord() {
      const app = this
      let passWord = {}
      // 修改密码弹框
      app.$Modal.confirm({
        title: '修改登录密码',
        render: (h) => {
          return h('div', {
            attrs: {
              class: 'kui-form-panel',
              style: 'padding-top: 24px;'
            }
          }, [
              h('Form', {
                props: {
                  model: passWord,
                  labelWidth: 80,
                  labelPosition: 'left'
                }
              }, [
                  h(
                    'FormItem',
                    {
                      props: {
                        label: '旧密码'
                      }
                    },
                    [
                      h('Input', {
                        props: {
                          value: passWord.oldpass
                        },
                        on: {
                          input: val => {
                            passWord.oldpass = val
                          }
                        }
                      })
                    ]
                  ),
                  h(
                    'FormItem',
                    {
                      props: {
                        label: '新密码'
                      }
                    },
                    [
                      h('Input', {
                        props: {
                          value: passWord.newpass
                        },
                        on: {
                          input: val => {
                            passWord.newpass =val
                          }
                        }
                      })
                    ]
                  )
                ])
            ])
        },
        onOk: () => {
          app.submitData(passWord, '/user/v1/safe')
        }
      })
    },
    // 提交修改数据
    async submitData(person, url) {
      const app = this
      let { data } = await app.$axios.put(url, person)
      if (data.code === 100) {
        app.$Message.success('修改成功')
        app.$Modal.remove()
        app.$router.replace("/")
      } else {
        app.$Message.error(data.msg)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.kui-user-data {
  background: #fff;
  .ivu-form-item{
    margin-bottom: 0;
  }
  .item{
    padding-bottom: 0;
  }
}
</style>
